<template>
  <view class="dark msg-content">
    <msg-fun></msg-fun>
    <view class="recommend-container">
      <view class="tw-flex tw-items-center tw-justify-between">
        <view class="tw-flex tw-items-center">
          <view class="fun-img-view">
            <img
              src="/static/icon/duoshan.png"
              alt="多闪图标"
              class="tw-w-12 tw-h-12 tw-rounded-lg tw-object-cover"
            />
          </view>
          <view class="recommend-app-desc ad-box">
            <h3 class="tw-text-gray-light ad-item">多闪</h3>
            <p class="tw-text-xs tw-text-gray-light ad-title">短视频社交</p>
          </view>
        </view>
        <!-- 向右对齐 -->
        <view class="tw-flex tw-items-center tw-justify-end">
          <button size="large" type="primary" class="download-btn">
            下 载
          </button>
        </view>
      </view>
      <view class="tw-mt-3 tw-text-xs tw-text-slate-200 tw-flex">
        <AvatarStack :avatars="avatars" :avatarSize="avatarSize" />
        <view class="tw-pl-2 tw-text-gray-400"> 在多闪聊天 </view>
      </view>
    </view>

    <!-- 互动消息 -->
    <view class="msg-container bg-color-bl">
      <view>
        <view class="tw-px-4 tw-space-y-3" v-if="friends.length">
          <view
            class="tw-rounded-xl tw-p-3 tw-shadow-sm tw-shadow-md-hover tw-transition-shadow"
            v-for="(friend, index) in friends"
            :key="index"
          >
            <view class="tw-flex tw-items-center tw-justify-between">
              <view class="tw-flex tw-items-center">
                <img
                  :src="this.baseURL + friend.avatar"
                  alt="用户头像"
                  class="tw-w-10 tw-h-10 tw-rounded-full tw-object-cover tw-border-2 tw-border-primary/50"
                />
                <view class="tw-ml-3">
                  <h4 class="tw-font-medium tw-text-sm">{{ friend.name }}</h4>
                  <p class="tw-text-xs tw-text-gray-light tw-truncate w-48">
                    {{ friend.message }}
                  </p>
                </view>
              </view>
              <view class="msg-timer-container tw-text-xs tw-text-gray-500">
                <text> {{ friend.time }}</text>
                <view
                  class="msg-notice tw-absolute tw-float-end"
                  v-if="friend.notice"
                ></view>
              </view>
            </view>
          </view>
        </view>
        <view class="no-more-msg" v-else> 无更多消息 </view>
      </view>
    </view>
  </view>
</template>

<script>
  import MsgFun from "./msg-fun.vue";
  import AvatarStack from "@/components/common/AvatarStack.vue";
  export default {
    name: "MsgContent",
    components: {
      MsgFun,
      AvatarStack,
    },
    data() {
      let httpPrefix = "http://localhost:5500";
      return {
        friends: [
          {
            id: 1,
            name: "在云小少爷",
            avatar: "/static/person/1.jpg",
            message: "在云小少爷发布了新作品",
            time: "20:20",
            notice: true,
          },
          {
            id: 2,
            name: "抖音小助手",
            avatar: "/static/person/2.jpg",
            message: "2024年1月抖音活动预告",
            time: "06:04",
            notice: true,
          },
          {
            id: 3,
            name: "用户588533255296",
            avatar: "/static/person/3.jpg",
            message: "用户588533255296的个性签名",
            time: "17:24",
          },
          {
            id: 4,
            name: "系统化撸号",
            avatar: "/static/person/4.jpg",
            message: "搞几个号，一人做运营团队",
            time: "昨天",
          },
          {
            id: 5,
            avatar: "/static/person/5.jpg",
            name: "旅行日记",
            message: "分享我的西藏之旅",
            time: "3天前",
          },
          {
            id: 6,
            name: "新闻号",
            avatar: "/static/person/6.jpg",
            message: "武汉大学女大诬告案如何破获？",
            time: "22:21",
          },
          {
            id: 7,
            avatar: "/static/person/7.jpg",
            message: "7-最新的国际消息",
            time: "3天前",
          },
          {
            id: 8,
            avatar: "/static/person/8.jpg",
            message: "8-tiktok的热点事件",
            time: "一周前",
          },
          {
            id: 9,
            avatar: "/static/person/9.jpg",
            message: "9-酷暑假期间，你都在干什么？",
            time: "1h之前",
          },
        ],
        avatars: [
          this.baseURL + "/static/person/1.jpg",
          this.baseURL + "/static/person/2.jpg",
          this.baseURL + "/static/person/3.jpg",
          this.baseURL + "/static/person/4.jpg",
          this.baseURL + "/static/person/5.jpg",
        ],
        avatarSize: 16,
        windowHeight: 0, // 获取窗口高度
        msgContainerHeight: 0, // 计算 msg-container 的高度
      };
    },
    computed: {},
    created() {},
    mounted() {
      this.calculateMsgContainerHeight();
    },
    beforeDestroy() {},
    methods: {
      calculateMsgContainerHeight() {
        // #ifdef H5
        this.windowHeight = window.innerHeight;
        // #endif
        // #ifdef MP-WEIXIN
        uni.getWindowInfo({
          success: (res) => {
            this.windowHeight = res.windowHeight;
          },
        });
        // #endif

        // 计算 msg-container 的高度，减去 tab 组件的高度、头部高度、推荐容器高度和底部高度
        const recommendContainerHeight = 122; // 推荐容器的高度，根据实际情况调整
        this.msgContainerHeight =
          this.windowHeight - 55 - 105 - recommendContainerHeight - 65 - 20;
      },
    },
  };
</script>

<style>
  .ad-item {
    font-weight: bold;
    font-size: 35px;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
  }
  .no-more-msg {
    width: 100px;
    padding: auto 16px;
    margin: auto 0;
    font-size: 20px;
    text-align: center;
    --tw-space-y-reverse: 0;
    margin-top: calc(12px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(12px * var(--tw-space-y-reverse));
  }
  .msg-content {
    border-top: 1px solid #808080d3;
    background-color: #171827;
    width: 100%;
  }
  .recommend-container {
    margin: auto 16px auto 16px;
    padding: 16px;
    height: 90px;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
      0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
      0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
  .recommend-app-desc {
    width: 120px;
    font-size: 30px;
    line-height: 35px;
    margin-left: 12px;
  }
  .fun-img-view {
    border-radius: 14px;
    border: 1px solid #c6c6c6e6;
    padding: 10px;
  }
  .download-btn {
    background-color: #ee4444;
    border-radius: 12px;
    padding: 6px 16px;
    color: #fff;
    border: 0 none;
    width: 100px;
    font-size: 16px;
  }
  .download-btn:hover {
    background-color: #ee4444;
    opacity: 0.8;
  }
  .bg-color-bl {
    background-color: #171827;
  }
  .msg-container {
    flex: 1;
    height: 100vh;
    margin-bottom: 50px;
    flex: 1 1 auto;
    overflow-y: auto;
    /* margin-bottom: 60px; */
    /* height: calc(100vh - 55px - 105px - 122px - 65px - 20px); */
    height: calc(100vh - 367px);
  }

  .msg-container::-webkit-scrollbar {
    display: none;
  }
  .msg-notice {
    width: 8px;
    height: 8px;
    background-color: #ffcc00;
    border-radius: 50%;
    animation: blink 1s infinite;
    position: absolute;
    float: right;
    top: 22px;
    right: 10px;
  }
  @keyframes blink {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  .msg-timer-container {
    min-width: 40px;
    position: relative;
  }
</style>
